<template>
  <!-- // 资源储备 -->
  <div class="homePageCard">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">已调配资源-队伍</div>
      <SelectOptions :value="sign" :options="option" @change="selectChange" />
    </div>
    <div class="mainBottom">
      <div class="flexBetween" style="height:20%;padding: 15px;">
        <div class="backgroundColor textCenter pointer" style="width:23%" @click="toResourceStatisticsList(id, 1, '3')">
          <div class="color008DFF fontWeight fontSize24 marginT5">{{ dwDataNums.onDeploy || 0 }}</div>
          <div class="white fontSize14">已调配</div>
        </div>
        <div class="backgroundColor textCenter pointer" style="width:23%" @click="toResourceStatisticsList(id, 2, '3')">
          <div class="colorEA753D fontWeight fontSize24 marginT5">{{ dwDataNums.onTheWay || 0 }}</div>
          <div class="white fontSize14">在途中</div>
        </div>
        <div class="backgroundColor textCenter pointer" style="width:23%" @click="toResourceStatisticsList(id, 3, '3')">
          <div class="color22EA15 fontWeight fontSize24 marginT5">{{ dwDataNums.onArrival || 0 }}</div>
          <div class="white fontSize14">已到达</div>
        </div>
      </div>
      <div id="Team" style="width:98%;height:80%">
        <BarCharts :option="option2" chartId="zwtzsd3" barChartsId="zwtzsd4" @barClick="barClickDw"></BarCharts>
      </div>
    </div>
    <el-dialog title="资源台账-队伍" :visible.sync="dialogZytzVisible" width="70%">
      <el-table :data="tableData222" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="60" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of dwColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import selectCity from "../mixin/selectCity";
import SelectOptions from "@/components/selectOptions.vue";
import BarCharts from "@/components/highCharts/NewBarCharts.vue";
import { getResourceTeamData, teamListPage } from "@/api/EmergencyResources/EmergencyResources.js";
import { dwColums } from "../../SystemHomepage/HomePageContent/columns";
export default {
  name: "EDResourcesTeam",
  components: { BarCharts, SelectOptions },
  mixins: [selectCity],
  data() {
    return {
      activeName: "first",
      sign: "",
      showBarCharts: false,
      option2: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 100,
          ch2: 30,
          ch3: 150
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 36,
          bottom: 6
        },
        legends: ["在途中", "已到达"],
        legendPosition: "top",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "单位:(支)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      id: "",
      dwDataNums: {},
      dialogZytzVisible: false,
      tableData222: [],
      dwColums: [],
      unitId: JSON.parse(sessionStorage.getItem("org")).orgId
    };
  },
  created() {
    this.dwColums = dwColums;
  },
  mounted() {
    this.getTeamDatas();
  },
  methods: {
    selectChange(val) {
      this.id = val;
      this.unitId = val;
      this.getTeamDatas(val);
    },
    barClickDw(barIndex, i) {
      // this.dialogZytzVisible = true;
      if (this.option2.legends[i - 1] === "在途中") {
        this.itemNumClick(2, this.xAxisData[barIndex - 1]);
      } else {
        this.itemNumClick(3, this.xAxisData[barIndex - 1]);
      }
    },
    itemNumClick(status) {
      const params = {
        pageNum: 1,
        pageSize: 500
      };
      const ztlist = [
        { label: "可调配", value: 0 },
        { label: "已调配", value: 1 },
        { label: "在途中", value: 2 },
        { label: "已到达", value: 3 }
      ];
      params.occupation = ztlist[status].value;
      params.unitId = this.unitId;
      this.getTeamList(params);
    },
    getTeamList(params) {
      teamListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "可调配";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          } else if (el.occupation === 2) {
            el.ztmc = "在途中";
          } else if (el.occupation === 3) {
            el.ztmc = "已到达";
          }
        });
        this.tableData222 = res.data;
        this.dialogZytzVisible = true;
      });
    },
    getTeamDatas(id) {
      this.option2.xAxis[0].data = [];
      this.xAxisData = [];
      this.option2.series = [];
      getResourceTeamData({ orgId: id || this.personOrgId }).then(res => {
        this.dwDataNums = {
          onArrival: res.onArrival,
          onDeploy: res.onDeploy,
          onTheWay: res.onTheWay
        };
        const arr = res.resourceDateStateVos;
        this.data1 = arr.map(item => item.onTheWay); // 在途中
        this.data2 = arr.map(item => item.onArrival); // 已到达
        this.data3 = arr.map(item => item.onDeploy); // 已调配
        this.xAxisData = arr.map(item => item.category);
        this.option2.xAxis[0].data = this.xAxisData;
        this.data1.forEach((el, index) => {
          this.option2.series.push([el, this.data2[index]]);
          // this.option2.series = [
          //   [5, 20],
          //   [30, 50]
          // ];
        });
        this.showBarCharts = true;
      });
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-dialog__header) {
  background: #5077ff;

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 5px;
    font-size: 30px !important;
  }

  .el-icon-close {
    color: #fff;
  }

  padding: 10px;
}

:deep(.el-dialog__body) {
  padding: 10px;
}

.homePageCard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .mainBottom {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.textCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:deep(.el-tabs--top.el-tabs--card > .el-tabs__header) {
  border-bottom: none;

  .el-tabs__item {
    color: #fff;
    padding: 0;
    width: 20%;
    height: auto;
    line-height: 30px;
    border: 1px solid #14a8ed;
    padding-left: 0;
    text-align: center;
    border-radius: 4px;

    &:nth-child(2) {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }

  .el-tabs__nav {
    float: none;
    display: flex;
    justify-content: space-around;
    margin: 20px;
    border: none;
  }

  .el-tabs__item.is-active {
    border-bottom: #14a8ed;
    background-color: #14a8ed;
  }
}



.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-tabs__content) {
    flex: 1;
  }
}

.colorEA753D {
  color: #ea753d;
}

.color22EA15 {
  color: #22ea15;
}
</style>
